<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="${base}" />
<title>室内环境监控系统</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="novafitness co.">
<link rel="stylesheet" type="text/css" href="${base}/plugins/home.css" media="all" />
<link rel="stylesheet" type="text/css" href="${base}/plugins/table.css" media="all"/>
<!-- Bootstrap -->
<link id="bootstrapCss" rel="stylesheet" href="${base}/plugins/zui/css/zui.css" />
<script type="text/javascript">
	var base = '${base}';
</script>

<style>
body {
	font-family: 'microsoft yahei';
	font-size: 16px;
}

.logo {
	height: 100px;
}

.menu li {
	width: 150px;
	text-align: center;
	padding: 0;
	'
}

.help-block {
	color: #f00;
	display: none;
}

.rooms {
	background-color: #F4F4F4;
}

.wendu1{
	color:green;
}
.wendu2{
	color:green;
}
.wendu3{
	color:green;
}
.wendu4{
	color:green;
}
.shidu{
	color:#FFC125;
}
.co2{
	color:#FF00FF;
}
.tvoc{
	color:#EED5B7;
}
.jiaquan{
	color:#CD8C95;
}
</style>
<style type="text/css" adt="123"></style>

<style type="text/css">
object, embed {
	-webkit-animation-duration: .001s;
	-webkit-animation-name: playerInserted;
	-ms-animation-duration: .001s;
	-ms-animation-name: playerInserted;
	-o-animation-duration: .001s;
	-o-animation-name: playerInserted;
	animation-duration: .001s;
	animation-name: playerInserted;
}

@
-webkit-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
-ms-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
-o-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}
}
.container{
width: 1024px;
min-width:1024px;
}

.pm25meter{
	width:193px;height:193px;
}

</style>
</head>
<body youdao="bind" ryt12934="1">
	<div class="container">
		<% layout("/common/header.html"){} %>
		<div id="search-bar" class="row">

			<div id="filter-bar" class="col-xs-4">

				<div class="btn-group" style="display: none;">
					<button id="seller-list" type="button" class="btn btn-primary dropdown-toggle"
						data-toggle="dropdown">
						<span data="value" class="hide"></span><span data="show">选择经销商</span> <span class="caret"></span>
					</button>
					<ul id="ul-seller-list" class="dropdown-menu seller" role="menu">
						<li onclick="clk_seller(this)"><a href="javascript:void(0);"><span class="hide"
								data="id">201</span><span data="name">jft</span> (<span data="province">山东</span>-<span
								data="city">济南</span>-<span data="county">济南</span>)</a></li>
						<li class="divider"></li>
					</ul>
				</div>


				<div class="btn-group" style="margin-left: 5px; width: 94px; display: none;" >
					<button id="consumer-list" type="button" class="btn btn-primary dropdown-toggle"
						data-toggle="dropdown">
						<span data="value" class="hide"></span><span data="show">选择用户</span> <span class="caret"></span>
					</button>
					<ul id="ul-consumer-list" class="dropdown-menu" role="menu"></ul>
				</div>

			</div>

			<div id="list-showtype" class="col-xs-5">
				<div class="btn-group">
					<button type="button" class="btn btn-primary" data="pm25">PM2.5</button>
					<button type="button" class="btn btn-default" data="wendu">温度</button>
					<button type="button" class="btn btn-default" data="shidu">湿度</button>
					<button type="button" class="btn btn-default" data="co2">CO2</button>
					<button type="button" class="btn btn-default" style="display: none;" data="tvoc">异味指数</button>
					<button type="button" class="btn btn-default" data="jiaquan">甲醛</button>
				</div>
			</div>
			<div class="col-xs-3" style="display: none">
				<button class="btn btn-primary" onclick="clk_datagrid()">数据表</button>
				<button class="btn btn-primary " onclick="clk_plot()">曲线图</button>
			</div>
		</div>
	</div>

	<div class="showPage hide" id="li-home">
		<div class="icons icon-arrow-down"></div>
	</div>
	<div id="page" class="page">
		<div id="groupBox" class="scrollBoxY"></div>
	</div>
	<!-- start room table -->
	<div class="rooms">
		<div id="nova-room-table" style="width: 1024px;">
		</div>
	</div>
	<!-- /end room table -->


	<div class="fixedDown">
		<div id="colorBar" class="linear"></div>
	</div>

	<div class="footer-bar">
		<div class="footer">
			<ul>



			</ul>
		</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script id="jquery" src="${base}/plugins/jquery.js"></script>
	<script src="${base}/plugins/echarts-all.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script id="bootstrapJs" type="text/javascript" src="${base}/plugins/zui/js/zui.js"></script>
	<script type="text/javascript" src="${base}/plugins/handlebars.js"></script>
	
	<script type="text/javascript" src="${base}/plugins/nova.js"></script>
	<script type="text/javascript" src="${base}/plugins/loadScripts.js"></script>
	<script src="${base}/plugins/json2.js" type="text/javascript" language="JavaScript"></script>


<script id="table-template" type="text/x-handlebars-template">
 {{#each this}}
<div class="room {{roomstyle}}" id="room-{{id}}">
<div class="devId">{{id}}</div>
<div class="header" onclick="click_room(this)" title="房间:{{devicename}},设备号:{{id}}">{{devicename}}</div>
<div class="pm25in" onclick="clk_data(this)">
	<div class="pm25meter value LED-font" id="pm25in-{{id}}">{{pm25in}}</div>
</div>
<div class="pm25out" onclick="clk_data(this)">
	<div class="pm25meter value LED-font" id="pm25out-{{id}}">{{pm25out}}</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="wendu1" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="室内进风温度">{{enteringairtempin}}</div>
	<div class="timestamp">0</div>
	<div class="valueType">室内进风温度</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="wendu2" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="室内出风温度">{{leavingairtempin}}</div>
	<div class="timestamp">0</div>
	<div class="valueType">室内出风温度</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="wendu3" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="室外进风温度">{{enteringairtempout}}</div>
	<div class="timestamp">0</div>
	<div class="valueType">室外进风温度</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="wendu4" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="室外出风温度">{{leavingairtempout}}</div>
	<div class="timestamp">0</div>
	<div class="valueType">室外出风温度</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="shidu" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="湿度">{{humidity}}</div>
	<div class="timestamp">0</div>
	<div class="valueType">湿度</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="co2" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="二氧化碳">{{co2}}</div>
	<div class="timestamp">0</div>
	<div class="valueType">二氧化碳</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="tvoc" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="异味指数">--</div>
	<div class="timestamp">0</div>
	<div class="valueType">异味指数</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="jiaquan" onclick="clk_data(this)" style="display: none;">
	<div class="value LED-font" title="甲醛">{{formaldehyde}}</div>
	<div class="timestamp">0</div>
	<div class="valueType">甲醛</div>
</div>
<div class="margin" style="display: none;"></div>
<div class="" onclick="clk_data(this)" style="font-size:5px;display: none;">
	<div class="value LED-font" title="更新时间" > {{recievedate}}</div>
	<div class="timestamp">0</div>
</div>
</div>
{{/each}}
</script>

	<script type="text/javascript">
   /*  loadJSById('jquery','/lib/jquery/jquery-1.11.1.min.js',function(){
    	loadJSById('bootstrapJs','lib/bootstrap/js/bootstrap.min.js',init);
    }); */
			var path = "/";
			var page = 1;
			var pageSize = 800;
			var pageNum = 1;
			var ValueSize = 60;//x轴数据个数
			var x = 0;
			var clock;
			var plotDevId="";
			var plotRoom="";
			var msgArr = new Array();
			var ROOM_COL = 8;
			var ROOM_WIDTH = "928px";
			var bJiaquan = true;
			var bTvoc = true;
			var bCo2 = true;
			var userInfo;
			function init(){
				$(document).ready(function(){
					getLogginInfo(init2);
					$("#li-home").click(function(event){
						var e=window.event || event;
						if(e.stopPropagation){
							e.stopPropagation();
						}else{
							e.cancelBubble = true;
						}
						if($("#page:visible").length>0){
							$("#page").fadeOut();
						}else{
							$("#page").fadeIn();
						}
					});
					document.onclick = function(){
						$("#page").fadeOut();
					};
					//$(".logo").css('background-image','url(/img/main.jpg)');
					//$("body").css('background-image','url(/img/old/bgnoise_lg.png)');
					//setInterval("refreshData()",5000);
					$("#list-showtype button").click(function(){
						if($(this).hasClass('btn-primary')){
							$(this).removeClass("btn-primary");
							$(this).addClass("btn-default");
						}else{
							$(this).removeClass("btn-default");
							$(this).addClass("btn-primary");
						}
						refreshShowType();
					});
				});
			}
			function init2(){
				userInfo=logginInfo.result[0];
				showPage();
				findSellerList(userInfo.name);
				findConsumerList(userInfo.name);
				if(userInfo.showDataType){
					var dt = parseInt(userInfo.showDataType);
					for(var i=0;i<6;i++){
						if(dt&(1<<i)){
							$("#list-showtype button:eq("+i+")").show();
						}else{
							$("#list-showtype button:eq("+i+")").hide();
						}
					}
				}
			}
			
			
			$(function(e){
				getDeviceData();
				setInterval(getDeviceData,5000);
				init();
			})
			
			var optionforpmm25in = {
			    tooltip : {
			        formatter: "{a} : {c}"
			    },
			    toolbox: {
			        show : false,
			        feature : {
			            mark : {show: true},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    series : [
			        {
			            name:'室内pm25',
			            type:'gauge',
			            min: 0,                     // 最小值
			            max: 350,                   // 最大值
			            //precision: 0,               // 小数精度，默认为0，无小数点
			           	splitNumber: 3,             // 分割段数，默认为5
			            axisLine: {            // 坐标轴线
			                show: true,        // 默认显示，属性show控制显示与否
			                lineStyle: {       // 属性lineStyle控制线条样式
			                    color: [[0.1, '#00FF00'],[0.214, '#FFFF00'],[0.33, '#FF6100'],[0.43, '#FF0000'],[0.71, '#C8170D'],[1, '#872222']], 
			                    width: 5
			                }
			            },
			            axisTick: {            // 坐标轴小标记
			                splitNumber: 10,   // 每份split细分多少段
			                length :10,        // 属性length控制线长
			                lineStyle: {       // 属性lineStyle控制线条样式
			                    color: 'auto'
			                }
			            },
			            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
			                show: false
			                },
			            detail : {formatter:'{value}'},
			            data:[{value: 50, name:'室内pm25'}]
			        }
			    ]
			};
			var optionforpmm25out = {
			    tooltip : {
			        formatter: "{a} : {c}"
			    },
			    toolbox: {
			        show : false,
			        feature : {
			            mark : {show: true},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    series : [
			        {
			            name:'室外pm25',
			            type:'gauge',
			            min: 0,                     // 最小值
			            max: 350,                   // 最大值
			            //precision: 0,               // 小数精度，默认为0，无小数点
			            splitNumber: 3,             // 分割段数，默认为5
			            axisLine: {            // 坐标轴线
			                show: true,        // 默认显示，属性show控制显示与否
			                lineStyle: {       // 属性lineStyle控制线条样式
			                	 color: [[0.1, '#00FF00'],[0.214, '#FFFF00'],[0.33, '#FF6100'],[0.43, '#FF0000'],[0.71, '#C8170D'],[1, '#872222']], 
				                 width: 5
			                }
			            },
			            axisTick: {            // 坐标轴小标记
			                splitNumber: 10,   // 每份split细分多少段
			                length :10,        // 属性length控制线长
			                lineStyle: {       // 属性lineStyle控制线条样式
			                    color: 'auto'
			                }
			            },
			            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
			                show: false
			                },
			            detail : {formatter:'{value}'},
			            data:[{value: 50, name:'室外pm25'}]
			        }
			    ]
			};
			
			var mychartarr = {};
			
			var count = 0;
			
			function getDeviceData(){
				//$("#nova-room-table").html("");
				
				$.ajax({
					url:"${base}/getData",
					dataType:'json',
					type:'post',
					success:function(data){
						
						if(count == 0){
							 var myTemplate = Handlebars.compile($("#table-template").html());
														 
							 $('#nova-room-table').html(myTemplate(data));
						}
						count ++;
						 
						 //refreshShowType();
						 
						 for(var i = 0 ; i < data.length;i++){
							 if(data[i].pm25inoption){
								 
								// $("#"+'pm25in-' + data[i].id).removeClass('value');
								 $("#"+'pm25in-' + data[i].id).removeClass('LED-font');
								// $("#"+'pm25out-' + data[i].id).removeClass('value');
								 $("#"+'pm25out-' + data[i].id).removeClass('LED-font');
								 var myChartpm25in = mychartarr['pm25in-' + data[i].id];
								 var myChartpm25out = mychartarr['pm25out-' + data[i].id];
								 if(!myChartpm25in){
									var dom = $("#room-"+data[i].id).clone();
									 
									 $("#room-"+data[i].id).remove();
									 
									 $('#nova-room-table').prepend(dom);
									 myChartpm25in = echarts.init(document.getElementById('pm25in-' + data[i].id));
									// myChartpm25out = echarts.init(document.getElementById('pm25out-' + data[i].id));
									 mychartarr['pm25in-' + data[i].id] = myChartpm25in;
									// mychartarr['pm25out-' + data[i].id] = myChartpm25out;
									 
								 }
								 if(!myChartpm25out){
									// myChartpm25in = echarts.init(document.getElementById('pm25in-' + data[i].id));
									 myChartpm25out = echarts.init(document.getElementById('pm25out-' + data[i].id));
									// mychartarr['pm25in-' + data[i].id] = myChartpm25in;
									 mychartarr['pm25out-' + data[i].id] = myChartpm25out;
								 }
								 optionforpmm25in.series[0].data[0].value = parseInt(data[i].pm25out);
								 myChartpm25in.setOption(optionforpmm25in,true);
								 optionforpmm25out.series[0].data[0].value = parseInt(data[i].pm25in);
								 myChartpm25out.setOption(optionforpmm25out,true);
								 //alert(JSON.parse(data[i].pm25inoption).toolbox)
								 $("#room-"+data[i].id).removeClass();
								 $("#room-"+data[i].id).addClass('room');
								 $("#room-"+data[i].id).addClass(data[i].roomstyle);
							 }else{
								// $("#"+'pm25in-' + data[i].id).removeClass('value');
								 $("#"+'pm25in-' + data[i].id).addClass('LED-font');
								// $("#"+'pm25out-' + data[i].id).removeClass('value');
								 $("#"+'pm25out-' + data[i].id).addClass('LED-font');
								 $("#"+'pm25in-' + data[i].id).text('--');
								 $("#"+'pm25out-' + data[i].id).text('--');
								 $("#room-"+data[i].id).removeClass();
								 $("#room-"+data[i].id).addClass('room');
								 $("#room-"+data[i].id).addClass(data[i].roomstyle);
								 
								 mychartarr['pm25in-' + data[i].id] = null;
								 mychartarr['pm25out-' + data[i].id] = null;
								 var dom = $("#room-"+data[i].id).clone();
								 
								 $("#room-"+data[i].id).remove();
								 
								 $('#nova-room-table').append(dom);
								 
							 }
						 }
						 
					}
				});
				
			}
			
		</script>
	<script src="${base}/plugins/data.js" type="text/javascript" ></script>
</body>
</html>